<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue使用之具名插槽</title>
    <script src="../vue.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <boy>
        <h1>hello</h1>
        <h1 slot=title>hello hi</h1>
    </boy>
</div>

<script type="text/javascript">
    Vue.component("boy",{
        // template:`<div><slot></slot>我是黄小强</div>`
        template:`
            <div>
                <slot></slot>
                <h1>我是黄小强</h1>
                <h1>我是</h1>
                <slot name="title"></slot>
                <h1>黄小强</h1>
            </div>
        `
    })
    var app = new Vue({
        el: '#app',
        data: {

        }
    })
</script>
</body>
</html>